<template>
	<view class="box">
		<view class="head">
			<text class="iconfont iconshouhuodizhi fs-24 gray_font"></text>
			<text v-if="info.plot">{{info.plot.name}}</text>
			<text v-if="info.floor">{{info.floor.name}}</text>
			<text v-if="info.layer">{{info.layer.name}}</text>
			<text v-if="info.room">{{info.room.name}}</text>
		</view>
		<view class="list_box">
			<view class="i_box">
				<view class="ibox">应缴纳月份</view>
				<view class="ibox">应缴纳金额</view>
			</view>

			<u-checkbox-group @change="sum" shape="circle" v-model="form">
				<view class="i_box" v-for="(item,index) in list" :key="index">

					<view class="ibox"><u-checkbox style="width:80%;" :wrap="true" v-model="item.checked" :name="item.id">{{item.name}}
							<view class="red" v-if="item.type==1">(欠费)</view>
							<view v-else class="red"></view>
						</u-checkbox></view>
					<view class="ibox">¥{{item.money}}</view>

				</view>
			</u-checkbox-group>
		</view>

        <view style="height: 52px;"></view>

		<view class="b_box">
			<view class="flex">
				<view class="iconfont fs-18" :class="check?'icondanxuanfuxuan':'iconico2'" @click="setCheck"></view>
				<view>全选</view>
			</view>
			<view class="flex">
				<view>总计: <text class="total">{{total}}</text></view>
				<view class="pay_box" @click="submit()">提交订单</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				list: [],
				check: false,
				total: 0,
				room_id: '',
				form: [],
				forms: []
			}
		},
		onLoad() {
			this.getAddress();
		},
		methods: {
			submit() {
				let lei = [];
				let money=0;
				this.list.forEach(res => {
					if (res.checked) {
						lei.push(res.name);
					}
				});
				
				if(lei.length<1) return this.$project.toast('请选择缴费月份');
				
				let stime=lei[0];
				let etime=lei[lei.length-1];
				this.$project.toPath('/pages/fw/jf/submit?stime=' + stime+'&etime='+etime+'&room_id='+this.room_id);
			},
			getList() {
				let params = {
					token: uni.getStorageSync('userToken')
				};
				params.room_id = this.room_id;
				this.$get(this.$api.jfLists, params, res => {
					let data = res.data;
					if (data.code == 1) {
						this.list = data.data;
					}
				});
			},
			setCheck() {
				this.check = !this.check;
				this.list.forEach(res => {
					if (this.check) {
						res.checked = true;
					} else {
						res.checked = false;
					}
				})
				this.setForms();
				this.sum();
			},
			setChecked(e) {
				if (e.length == 1) {

					this.list.forEach(res => {
						if (res.id < e[0]) {
							res.checked = true;
						}
					})

				} else {

					let cha = this.$project.difference(e, this.forms);

					if (cha.length > 0) {

						this.list.forEach(res => {
							if (res.id <= cha[0]) {
								res.checked = true;
							} else {
								res.checked = false;
							}
						})

					} else {

						let cha = this.$project.difference(this.forms, e);
						this.list.forEach(res => {
							if (res.id >= cha[0]) {
								res.checked = false;
							} else {
								res.checked = true;
							}
						})

					}
				}

				this.setForms();
			},
			setForms() {
				let lei = [];
				this.list.forEach(res => {
					if (res.checked) {
						lei.push(res.id);
					}
				})
				this.forms = lei;
			},
			sum(e) {

				if (e) {
					this.setChecked(e);
				}

				let total = 0;
				this.list.forEach(res => {
					if (res.checked) {
						total += Number(res.money);
					}
				})

				this.total = total.toFixed(2);
			},
			getAddress() {
				let params = {
					token: uni.getStorageSync('userToken'),
					status: 2
				};
				this.$get(this.$api.aduitInfo, params, res => {
					let data = res.data;
					if (data.code == 1) {
						this.info = data.data;
						this.room_id = data.data.room_id;
						this.getList();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.box {
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.head {
		display: flex;
		align-items: center;
		background-color: white;
		box-sizing: border-box;
		padding: 10rpx 10rpx;
		font-size: 28rpx;
	}

	.list_box {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.i_box {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: white;
		border: 1rpx solid #eee;
		width: 100%;
	}

	.ibox {
		width: 50%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.red {
		color: #DE423D;
		font-size: 26rpx;
		width:45px;
		display: inline-block;
	}

	.iconfont {
		color: #c8c9cc;
		margin-right: 10rpx;
		font-size: 55rpx;
	}

	.icondanxuanfuxuan {
		color: #2b72fe;
	}

	.b_box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding: 10rpx 30rpx 10rpx 35rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pay_box {
		width: 200rpx;
		height: 85rpx;
		line-height: 85rpx;
		text-align: center;
		color: white;
		background-color: #489AFE;
		margin-left: 20rpx;
	}

	.total {
		color: #489AFE;
		margin-left: 20rpx;
	}
</style>